<template>
	<u-popup mode="bottom" ref="popup" :show="show" @close="close">
		<view class="popup">
			<view class="popup-hd flex justify-between">
				<view>
					<text class="text-red">*</text>
					<text>可选择订单</text>
				</view>
				<text class="cuIcon-close"></text>
			</view>
			<view class="popup-bd">
				<mescroll-uni ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback" :fixed="false">
					<view @click="setCheck(item)" class="order-item flex align-center" v-for="(item, index) in list" :key="index">
						<view class="flex-sub">
							<view class="flex">
								<text>订单号：</text>
								<text class="text-black">{{ item.order_no }}</text>
							</view>
							<view class="flex margin-top-sm">
								<text>订单金额：</text>
								<text class="text-red">{{ item.amount }}元</text>
							</view>
						</view>
						<div class="check">
							<image src="/static/no_check_red@2x.png" mode="widthFix" v-if="!item.ischeck"></image>
							<image src="/static/invoice/check.png" mode="widthFix" v-else></image>
						</div>
					</view>
				</mescroll-uni>
			</view>
			<view class="popup-ft">
				<view class="btn" @tap="submit">确定</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			downOption: {
				auto: false
			},
			upOption: {
				auto: false
			},
			list: [],
			show: false
		};
	},
	components: {},
	methods: {
		open() {
			this.show = true;
			this.$nextTick(() => {
				this.mescroll && this.mescroll.resetUpScroll();
			});
		},
		setCheck(item) {
			item.ischeck = !item.ischeck;
		},
		upCallback() {
			this.getInvoicesOrders();
		},
		getInvoicesOrders() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			this.$postAction(this.$api.getInvoicesOrders, {
				page: pageNum,
				limit: pageSize
			})
				.then(da => {
					if (da.data && da.data.length > 0) {
						let curPageData = da.data.map(item => {
							item.ischeck = false;
							return item;
						});
						this.mescroll.endBySize(curPageData.length, da.count);
						if (this.mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(curPageData); //追加新数据
					} else {
						this.list = [];
						this.mescroll.endSuccess(0, false);
					}
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		submit() {
			let list = this.list.filter(item => item.ischeck);
			this.$emit('add', list);
			this.$refs.popup.close();
		}
	},
	options: {
		styleIsolation: 'shared'
	}
};
</script>

<style scoped lang="scss">
::v-deep .uni-popup__wrapper-box {
	padding-bottom: 0;
}

.popup {
	background: #f4f4f4;
}

.popup-hd {
	color: #1c1c1e;
	padding: 40rpx 28rpx;
	font-weight: 500;
	font-size: 30rpx;
	line-height: 42rpx;

	.cuIcon-close {
		color: #b8b8b8;
		font-size: 40rpx;
	}
}

.popup-bd {
	background: #f4f4f4;
	padding: 0 28rpx;
	height: 50vh;

	.order-item {
		background: #fff;
		border-radius: 12rpx;
		color: #848484;
		padding: 24rpx 32rpx 24rpx 24rpx;
		line-height: 40rpx;
		margin-bottom: 18rpx;
	}

	.check {
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
}

.popup-ft {
	background: #f4f4f4;
	padding: 30rpx 28rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);

	.btn {
		height: 88rpx;
		background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
		box-shadow: 0rpx 12rpx 24rpx -9rpx #ffbec2;
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
	}
}
</style>
